<template>
	<view class="user-childer">
		<y-cubar title="我的下级" :bgColor="`rgba(255,255,255,${opacity})`" />
		<view class="user-childer-bg"></view>

		<view class="user-card">
			<view class="item">
				<view class="label">累计推广(人)</view>
				<view class="num">{{ numInfo.expandCount }}</view>
			</view>
			<view class="item">
				<view class="label">成交人数</view>
				<view class="num">{{ numInfo.finishCount }}</view>
			</view>
			<view class="item">
				<view class="label">奖励金额</view>
				<view class="num">{{ numInfo.sumMoney }}</view>
			</view>
		</view>
		<view class="nav-title">
			成员列表
		</view>
		<common-list :isDataEmpty="tableData.length === 0" :status="status">
			<template #list>
				<view>
					<view class="user-list">
						<view class="user-item" v-for="item in tableData" :key="item.id">
							<view class="user-info">
								<image :src="item.avatar || '/static/logo.png'" mode="aspectFill"></image>
								<view class="info">
									<view class="name">{{ item.nickName }}</view>
									<view class="phone">{{ item.cellphone}}</view>
								</view>
								<view class="prices">
									<view class="price">+{{ item.moneySum }}</view>
									<view class="status">成交奖励</view>
								</view>
							</view>
							<view class="reward" v-if="item.list">
								<view class="reward-card" v-for="el in item.list" :key="el.id">
									<view class="top">
										<view class="title">{{ el.type === 'AWARD' ? '租车奖励' : '提现' }}</view>
										<view class="price">+{{ el.brokerageMoney }}</view>
									</view>
									<view class="bottom">
										<view class="date">{{ el.createTime }}</view>
										<view class="status">已成交</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</common-list>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onPageScroll,
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		doChilderNum,
		doChilderList,
	} from '@/apis/user.js'
	import {
		userList
	} from '@/hooks/userList.js'
	import YCubar from '@/components/y-cubar/index.vue'
	import CommonList from '@/components/commonList/list.vue'
	const opacity = ref(0)
	onPageScroll((e) => {
		const childerOpa = Number((e.scrollTop / 200).toFixed(2))
		opacity.value = childerOpa >= 1 ? 1 : childerOpa
	})

	const handJump = (url) => {
		uni.navigateTo({
			url
		})
	}

	const numInfo = ref({
		expandCount: 0,
		finishCount: 0,
		sumMoney: 0,
	})
	const getApi = async (params) => {
		const res = await doChilderList(params)
		return res
	}
	const {
		tableData,
		status,
		fetchData,
		onBottom,
		onRefresh,
		queryForm
	} = userList({
		apis: {
			getApi
		},
		initForm: {}
	})
	onPullDownRefresh(() => {
		onRefresh()
	})
	onReachBottom(() => {
		onBottom()
	})

	onLoad(() => {
		doChilderNum().then(data => {
			numInfo.value = data
		})
		onRefresh()
	})
</script>

<style lang="scss" scoped>
	.user-childer {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 150rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);

		&-bg {
			width: 750rpx;
			height: 240rpx;
			background: #FFC434;
			position: absolute;
			top: 0;
			border-radius: 0 0 30rpx 30rpx;
		}

		.user-card {
			position: relative;
			z-index: 3;
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 34rpx 24rpx;
			display: flex;
			justify-content: space-between;
			padding: 32rpx 42rpx;
			box-sizing: border-box;

			.item {
				.label {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.num {
					margin-top: 12rpx;
					font-size: 44rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
		}

		.nav-title {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			padding: 0rpx 24rpx 0 24rpx;
		}

		.user-list {
			padding: 24rpx;

			.user-item {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 24rpx;
				box-sizing: border-box;

				&:not(:first-child) {
					margin-top: 24rpx;
				}

				.user-info {
					display: flex;
					align-items: center;

					image {
						width: 110rpx;
						height: 110rpx;
						border-radius: 50%;
					}

					.info {
						flex: 1;
						margin: 0 24rpx;

						.name {
							font-size: 32rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #333333;
						}

						.phone {
							margin-top: 18rpx;
							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						.date {
							margin-top: 4rpx;
							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}

					.prices {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.price {
							font-size: 32rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #333333;
						}

						.status {
							margin-top: 10rpx;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
				}

				.reward {
					&-card {
						margin-top: 20rpx;
						background: #F5F5F5;
						border-radius: 16rpx;
						padding: 24rpx;
						box-sizing: border-box;

						.top {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.title {
								font-size: 30rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #333333;
							}

							.price {
								font-size: 30rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #333333;
							}
						}

						.bottom {
							margin-top: 10rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.date {
								font-size: 24rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
							}

							.status {
								font-size: 24rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #27C485;
							}
						}
					}
				}
			}
		}


	}
</style>